<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="./plugins/layui/css/myPage.css">
    <style>
        .layui-form-select dl{
            max-height: 100px; //原值为300，调节高度建议为50的倍数
        }
    </style>
</head>
<body  >
<div class="layui-container">


    <form class="layui-form">
        <div class="layui-row">
            <div class="layui-col-md12">

                <fieldset class="layui-elem-field" style="margin-top: 20px;">
                    <legend>找回密码</legend>


                    <div class="layui-form-item">

                        <div class="layui-inline" style="padding-left: 15%">
                            <label class="layui-form-label"><span style="color: red;">*</span>请输入用户名</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input   type="text" name="yhm"  lay-verify="required" required   class="layui-input" id="yhm" >


                            </div>
                        </div>

                        <div class="layui-inline" style="padding-left: 15%">
                            <label class="layui-form-label"><span style="color: red;">*</span>请输入手机号</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input   type="text" name="mobile"  lay-verify="required" required   class="layui-input" id="sjh" >
                                <input   type="hidden" name="temp_id"   class="layui-input"  id="temp_id" >


                            </div>
                        </div>

                        <div class="layui-inline" style="padding-left: 15%">
                            <label class="layui-form-label"><span style="color: red;">*</span>请输入验证码</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input   type="text" name="yzm"   maxlength="6"  class="layui-input" id="yzm" >
                            </div>
                            <!--<button class="layui-btn layui-btn-normal"   lay-submit  lay-filter="getYzm" style="width: 70%;" id="sendToTel" >获取验证码</button>-->
                            <input id="btnSendCode" style="margin-top:7px; padding: 3px;font-size: 1px;text-align: center; background-color:white;border: 1px solid #E2E2E2;" name="btnSendCode" type="button"   lay-submit  lay-filter="Yzm" value="获取验证码"  />

                        </div>



                    </div>






                </fieldset>
            </div>
        </div>


        <button class="layui-btn layui-btn-normal"  lay-submit  lay-filter="new" style="width: 20%; position: absolute;left: 35%"  >立即提交</button>
    </form>
</div>
<script src="./plugins/layui/layui.js"></script>
<script src="./js/config.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/jquery.md5.js"></script>
<script src="./js/tools.js"></script>

<script>
    layui.use(['table','form','layer','laydate','upload'],function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var currentUser;
        var yzmRight = false;
        var msg_id = "";
        var InterValObj; //timer变量，控制时间
        var count = 30; //间隔函数，1秒执行
        var curCount;//当前剩余秒数

        //校验


        judgments($,['mingmu','bzr','jsr'],/^[\u4E00-\u9FA5A-Za-z]+$/,"只能输入中文和英文");
        judgments($,["jine"],/^([1-9]\d*|0)(\.\d{1,2})?$/,"请输入整数或小数");





        form.on('submit(new)', function(data){
            if( yzmRight != true){
                alert('请先进行验证');

            }else {
                console.log(data.field);
                $("input").css("border","");
                $.ajax({
                    url: contextPath+"/resetPswWeb",
                    type: "PUT",
                    contentType:"application/json;charset=utf-8",
                    data: JSON.stringify(data.field) ,
                    dataType:"json",
                    success: function(res) {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        layer.msg(res.message,{
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        },function () {
                            parent.layer.close(index);
                        });
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            }


        });

        form.on('submit(Yzm)', function(data){
            if(document.getElementById("sjh").value==''||document.getElementById("sjh").value.length!=11){
                alert('请输入正确的手机号');
            }else {
                alert('已发送验证码至您的手机，请查收');
                //ajax发送
                //调用方法
                data.field.temp_id = 1;
                msg_id = "";
                console.log(data.field);
                $("input").css("border", "");
                $.ajax({
                    url: contextPath + "/codes",
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(data.field),
                    dataType: "json",
                    success: function (res) {
                        console.log(res)
                        msg_id = res.msg_id;
                    }
                });
                curCount = count;
                // 设置button效果，开始计时
                document.getElementById("btnSendCode").setAttribute("disabled", "true");//设置按钮为禁用状态
                document.getElementById("btnSendCode").value = curCount + "秒后重获";//更改按钮文字
                InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



            $('#yzm').bind('input propertychange', function(data) {
                if($(this).val().length==6 && yzmRight == false) {
                    if ($(this).val() != "" && msg_id != "") {
                        // console.log(data.field);
                        $("input").css("border","");
                        $.ajax({
                            url: contextPath+"/codes/valid",
                            type: "POST",
                            contentType:"application/json;charset=utf-8",
                            data: JSON.stringify(GetJsonData()) ,
                            dataType:"json",
                            success: function(res) {
                                console.log(res);
                                if(res.is_valid == true){
                                    yzmRight = true;
                                    alert('验证码成功!');
                                    $("#yzm").attr("disabled",true);
                                    $("#yzm").addClass("layui-disabled");
                                }else {
                                    alert('验证码错误或者过期!');
                                }

                            }
                        });

                    }else {
                        console.log(data.field);
                        alert('验证码错误或者过期!');

                    }
                }
            });
        function GetJsonData() {
            var json = {
                "msg_id": msg_id,
                "code": $("#yzm").val(),
            };
            return json;
        }



        //timer处理函数
        function SetRemainTime() {
            if (curCount == 0) {//超时重新获取验证码
                window.clearInterval(InterValObj);// 停止计时器
                document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
                document.getElementById("btnSendCode").value="重获验证码";
            }else {
                curCount--;
                document.getElementById("btnSendCode").value=curCount + "秒后重获";
            }
        }

    });

</script>
</body>
</html>